import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./AddChord.module.less";
import { useStore as useAnalysisStore } from "@/store/analysis";
import beatTypes from "@/common/dicts/beatTypes";
import ChordSet from "./ChordSet/ChordSet";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const chordSetRef = ref(null as any);
    const analysisStore = useAnalysisStore();
    // 歌词获取
    const getWord = (note) => {
      if (note.isRest) {
        return "-";
      }
      if (note.word) {
        return note.word;
      }
      return beatTypes[note.type];
    }
    const activeLyric = reactive({
      measureIdx: 0,
      noteIdx: 0,
    })

    const radioState = reactive({
      list: ["C"],
      checked: "C",
    })

    onMounted(() => {
      if (analysisStore.tone.score_tone) {
        radioState.list.push(analysisStore.tone.chord_tone);
        radioState.checked = analysisStore.tone.chord_tone;
      }
    })

    //设置和弦
    const setChord = (measureIdx: number, noteIdx: number) => {
      activeLyric.measureIdx = measureIdx;
      activeLyric.noteIdx = noteIdx;
      chordSetRef.value.open(analysisStore.xmlData.measures[measureIdx][noteIdx]);
    }
    //设置和弦回传
    const doChordSet = (e) => {
      const name = analysisStore.xmlData.measures[activeLyric.measureIdx][activeLyric.noteIdx].choose || "";
      if (!e.choose.enter) {
        analysisStore.setRemark(e.choose.name, `和弦${e.choose.name}暂未录入`);
      }
      analysisStore.setChordXml(e, activeLyric.measureIdx, activeLyric.noteIdx);
      // 备注里有该原和弦提醒,修改完后曲谱内无该原和弦，此时清除该原和弦备注
      if (analysisStore.remarks.map(x => x.name).includes(name) && analysisStore.xmlData.measures.every(x => x.every(y => y.choose !== name))) {
        analysisStore.removeRemark(name);
      }
    }
    //清除和弦
    const clearChord = (measureIdx: number, noteIdx: number) => {
      const name = analysisStore.xmlData.measures[measureIdx][noteIdx].choose || "";
      analysisStore.clearChordXml(measureIdx, noteIdx);
      // 备注里有该和弦提醒,删除完后曲谱内无该和弦，此时清除该和弦备注
      if (analysisStore.remarks.map(x => x.name).includes(name) && analysisStore.xmlData.measures.every(x => x.every(y => y.choose !== name))) {
        analysisStore.removeRemark(name);
      }
    }
    // 删除小节
    const removeMeasure = (measureIdx) => {
      if (measureIdx !== analysisStore.xmlData.measures.length - 1) {
        message.error("只能删除最后一行")
        return;
      }
      analysisStore.xmlData.measures.splice(measureIdx, 1);
    }
    // 判断小节错误
    const isError = (measure) => {
      return measure.every?.(x => !x.choose) || measure.filter?.(x => x.beat?.toString() === '960')?.length === 1;
    }
    return () => (
      <>
        <div class={styles.addChord}>
          <div class={styles.warnings}>
            <a-space direction="vertical" style="width: 100%">
              {
                analysisStore.remarks.map((item: any) => (
                  <a-alert message={item.text} type="warning" />
                ))
              }
            </a-space>
          </div>
          <div class={styles.radios}>
            <a-radio-group v-model:value={radioState.checked}>
              {
                radioState.list.map((item) => (
                  <a-radio-button value={item}>{item}</a-radio-button>
                ))
              }
            </a-radio-group>
          </div>
          <div class={styles.measures}>
            {
              analysisStore.xmlData.measures?.map((measure, measureIdx) => (
                <a-dropdown trigger="contextmenu" placement="bottomRight" v-slots={{
                  overlay: () => <>
                    <a-menu>
                      <a-menu-item key="1" onClick={() => { removeMeasure(measureIdx) }}>删除小节</a-menu-item>
                    </a-menu>
                  </>
                }}>
                  <div class={styles.measure}>
                    <div class={[styles.flag, isError(measure) && styles.error]}>{measureIdx + 1}</div>
                    {
                      measure?.map((note, noteIdx) => (
                        note.isChord || <div class={styles.noteBox}>
                          <a-dropdown trigger="contextmenu" placement="bottomRight" v-slots={{
                            overlay: () => <>
                              <a-menu>
                                <a-menu-item key="1" onClick={() => { setChord(measureIdx, noteIdx) }}>设置和弦</a-menu-item>
                                <a-menu-item key="2" onClick={() => { clearChord(measureIdx, noteIdx) }}>清除和弦</a-menu-item>
                              </a-menu>
                            </>
                          }}>
                            <div class={styles.note} onDblclick={() => { setChord(measureIdx, noteIdx) }}>
                              <div class={styles.word}>{getWord(note)}</div>
                              <div class={styles.chordBox}>
                                {
                                  radioState.checked === 'C' ? (note.choose && <div class={styles.chord}>{note.choose}</div>) : (note.chooseOri && <div class={styles.chord}>{note.chooseOri}</div>)
                                }
                                {
                                  note.beat && <div class={styles.beat}>{note.beat}</div>
                                }
                              </div>
                            </div>
                          </a-dropdown>
                        </div>
                      ))
                    }
                  </div>
                </a-dropdown>
              ))
            }
          </div>
        </div>
        <ChordSet ref={chordSetRef} onConfirm={(e) => { doChordSet(e) }} />
      </>
    )
  }
})